<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>静态说明动态按钮模板</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        padding: 20px;
        max-width: 800px;
        margin: 0 auto;
        line-height: 1.6;
      }

      h1 {
        color: #333;
        margin-bottom: 20px;
        text-align: center;
      }

      .button-container {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin: 20px 0;
      }

      button {
        padding: 8px 16px;
        background: #4285f4;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      button:hover {
        background: #3367d6;
      }

      .explanation {
        background: #f5f5f5;
        padding: 20px;
        border-radius: 5px;
        margin: 30px 0;
        border-left: 4px solid #4285f4;
      }
    </style>
  </head>
  <body>
    <h1>功能演示模板</h1>

    <div id="buttons-container" class="button-container">
      <!-- 按钮将通过JS动态渲染 -->
    </div>

    <div class="explanation">
      <h2>静态说明标题</h2>
      <p>这里是永远不会改变的静态说明内容。</p>
      <p>您可以在这里放置使用说明、注意事项或其他任何不需要变更的文本内容。</p>
      <ul>
        <li>说明点1：这个模板的特点</li>
        <li>说明点2：按钮是动态生成的</li>
        <li>说明点3：说明区域是静态不变的</li>
      </ul>
    </div>

    <script>
      // 按钮配置数组
      const buttons = [
        {
          text: '功能按钮1',
          action: () => {
            console.log('执行功能1')
            // 在这里添加功能1的实际代码
          },
        },
        {
          text: '功能按钮2',
          action: () => {
            console.log('执行功能2')
            // 在这里添加功能2的实际代码
          },
        },
        {
          text: '特殊操作',
          action: () => {
            console.log('执行特殊操作')
            // 在这里添加特殊操作的实际代码
          },
        },
      ]

      // 动态渲染按钮
      function renderButtons() {
        const container = document.getElementById('buttons-container')

        buttons.forEach(btn => {
          const button = document.createElement('button')
          button.textContent = btn.text
          button.addEventListener('click', btn.action)
          container.appendChild(button)
        })
      }

      // 初始化
      document.addEventListener('DOMContentLoaded', renderButtons)
    </script>
  </body>
</html>
